<template>
  <div id="home">
    <!-- <div>111</div> -->
    <el-divider content-position="left"><el-icon>
        <Clock />
      </el-icon>最近使用</el-divider>
    <div class="list">
      <div class="item">
        <img :src="getAssetsFile('images/destop/day.png')" />
        <span>我的任务</span>
      </div>
      <div class="item">
        <img :src="`${getAssetsFile('images/destop/stamp.png')}`" />
        <span>任务审核</span>
      </div>
      <div class="item">
        <img :src="`${getAssetsFile('images/destop/notice.png')}`" />
        <span>我的通知</span>
      </div>
      <div class="item">
        <img :src="`${getAssetsFile('images/destop/audit.png')}`" />
        <span>待办审核</span>
      </div>
      <div class="item">
        <img :src="`${getAssetsFile('images/destop/confirm.png')}`" />
        <span>检测申请</span>
      </div>
      <div class="item">
        <img :src="`${getAssetsFile('images/destop/safe.png')}`" />
        <span>安全检测</span>
      </div>
      <div class="item">
        <img :src="`${getAssetsFile('images/destop/statistics.png')}`" />
        <span>申请统计</span>
      </div>
    </div>
    <div class="dvd">
      <el-divider content-position="left"><el-icon>
          <Position />
        </el-icon>我的应用
      </el-divider>
      <el-icon class="right-icon">
        <Setting />
      </el-icon>
    </div>
    <div class="list">
      <div class="item" v-for="sMd in sysModuleList" :key="sMd.name" @click="openSystemModule(sMd)">
        <img :src="getAssetsFile('images/destop/' + sMd.inImage)" />
        <span>{{ sMd.name }}</span>
      </div>
    </div>
    <el-row justify="space-evenly" :gutter="20" v-for="(mdList, idx) in homeModuleList" :key="idx">
      <el-col :span="24 / mdList.length" v-for="md in mdList" :key="md.id">
        <div class="dvd">
          <el-divider content-position="left">
            <el-icon v-if="md.icon && md.icon.length > 0">
              <component :is="md.icon" class="icon"></component>
            </el-icon>
            {{ md.name }}
          </el-divider>
          <el-icon class="right-icon">
            <Link />
          </el-icon>
          <iframe v-if="md.System && md.url" class="ifm-module" :src="md.System ? md.System.webUrl + md.url : md.url" :style="{ height: md.height + 'px' }" scrolling="no" />
        </div>
      </el-col>
    </el-row>
    <el-row justify="space-evenly" :gutter="20">
      <el-col :span="12">
        <div class="dvd">
          <el-divider content-position="left"><el-icon>
              <Aim />
            </el-icon>我的任务
          </el-divider>
          <el-icon class="right-icon">
            <Link />
          </el-icon>
        </div>
        <el-table v-loading="loading1" row-key="id" :data="list1" style="width: 100%" max-height="240px">
          <el-table-column label="任务名称" width="140" align="left">
            <template #default="scope">
              <el-link type="primary" :underline="false">{{ scope.row.name }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="内容" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="limitTime" label="要求完成时间" width="140" align="center"></el-table-column>
          <el-table-column prop="level" label="紧急程度" width="100" align="center"></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <div class="dvd">
          <el-divider content-position="left"><el-icon>
              <Aim />
            </el-icon>我的消息
          </el-divider>
          <el-icon class="right-icon">
            <Link />
          </el-icon>
        </div>
        <el-table v-loading="loading1" row-key="id" :data="list1" style="width: 100%" max-height="240px">
          <el-table-column label="申请名称" width="140" align="left">
            <template #default="scope">
              <el-link type="primary" :underline="false">{{ scope.row.name }}</el-link>
              <!-- @click="handleEdit(scope.row.id)" -->
            </template>
          </el-table-column>
          <el-table-column prop="content" label="内容" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="limitTime" label="申请时间" width="140" align="center"></el-table-column>
          <el-table-column prop="level" label="紧急程度" width="100" align="center"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row justify="space-evenly" :gutter="20" class="mt-30">
      <el-col :span="12">
        <el-divider content-position="left"><el-icon>
            <PieChart />
          </el-icon>任务统计</el-divider>
        <div id="ecList1" class="chart"></div>
      </el-col>
      <el-col :span="12">
        <el-divider content-position="left"><el-icon>
            <DataAnalysis />
          </el-icon>审核统计</el-divider>
        <div id="ecList2" class="chart"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'; //getCurrentInstance
import * as echarts from 'echarts';
import { getAssetsFile } from '../utils/common'; //notifyType, notifyMessage,
// import { AppStore } from '../stores/store';
// import { notifyType, notifyMessage } from '../utils/common';
// // import { io } from 'socket.io-client';
// import log from 'electron-log/renderer';

// let { proxy }: any = getCurrentInstance();
// let store = AppStore();

//系统功能列表
let sysModuleList: any = reactive([]);
let homeModuleList: any = reactive([]);

init();

function init() {
  // findRoleHomeModuleList();
}

function openSystemModule(md: any) {
  console.log(md);
  // window.electron.ipcRenderer.send('open-window-system-url', {
  //   webUrl: md.webUrl,
  //   loginPath: md.loginPath,
  //   token: store.token,
  //   indexPath: md.indexPath,
  //   isMaximize: true
  // });
  // window.electron.ipcRenderer.send('open-window-url', {
  //   url: md.webUrl + md.indexPath,
  //   isMaximize: true
  // });
}

// function findRoleHomeModuleList() {
//   proxy.$http
//     .get('/api/sys/findRoleHomeModuleListByRoleId', {
//       params: {
//         id: store.userInfo.role.id
//       }
//     })
//     .then((res: any) => {
//       if (res.status.code !== 1) {
//         notifyMessage(res.status.msg, notifyType.warning, proxy);
//         return;
//       }
//       if (res.data.roleModule && res.data.roleModule.RoleHomeModules) {
//         let row: any = [];
//         let idx = 0;
//         for (let md of res.data.roleModule.RoleHomeModules) {
//           if (row.length === res.data.roleModule.homeColumn) {
//             homeModuleList.push(row);
//             row = [];
//           }

//           row.push(md);
//           if (idx === res.data.roleModule.RoleHomeModules.length - 1) {
//             homeModuleList.push(row);
//             row = [];
//           }
//           idx++;
//         }
//       }
//     })
//     .catch((err: string) => {
//       notifyMessage(err, notifyType.warning, proxy);
//     });
// }

let list1: any = reactive([
  {
    name: '任务1',
    content: '很重要的一个任务，抓紧完成！',
    limitTime: '2023-03-15 12:00',
    level: '紧急重要'
  },
  {
    name: '任务2',
    content: '很重要的一个任务，抓紧完成！',
    limitTime: '2023-03-15 12:00',
    level: '紧急非重要'
  },
  {
    name: '任务3',
    content: '很重要的一个任务，抓紧完成！',
    limitTime: '2023-03-15 12:00',
    level: '非紧急重要'
  },
  {
    name: '任务4',
    content: '很重要的一个任务，抓紧完成！',
    limitTime: '2023-03-15 12:00',
    level: '非紧急重要'
  },
  {
    name: '任务5',
    content: '很重要的一个任务，抓紧完成！',
    limitTime: '2023-03-15 12:00',
    level: '紧急重要'
  },
  {
    name: '任务5',
    content: '很重要的一个任务，抓紧完成！',
    limitTime: '2023-03-15 12:00',
    level: '紧急重要'
  },
  {
    name: '任务5',
    content: '很重要的一个任务，抓紧完成！',
    limitTime: '2023-03-15 12:00',
    level: '紧急重要'
  }
]);
let loading1 = ref(false);
// let list2: any = reactive([
//   {
//     name: '任务1',
//     content: '很重要的一个任务，抓紧完成！',
//     limitTime: '2023-03-15 12:00',
//     level: '紧急重要'
//   }
// ]);

onMounted(() => {
  const myChart = echarts.init(document.getElementById('ecList1') as HTMLElement);
  // 绘制图表
  myChart.setOption({
    title: {
      text: '任务分类统计',
      textAlign: 'center',
      left: '50%',
      textStyle: {
        fontSize: 14
      }
    },
    grid: {
      left: 50,
      right: 50,
      top: 50,
      bottom: 40
    },
    tooltip: {},
    xAxis: {
      data: ['检验任务', '签到任务', '计划任务', '采集任务', '分配任务', '审核任务']
    },
    yAxis: {},
    series: [
      {
        name: '数量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });

  const myChart2 = echarts.init(document.getElementById('ecList2') as HTMLElement);
  // 绘制图表
  myChart2.setOption({
    title: {
      text: '任务分类统计',
      textAlign: 'center',
      left: '50%',
      textStyle: {
        fontSize: 14
      }
    },
    grid: {
      left: 50,
      right: 50,
      top: 50,
      bottom: 40
    },
    tooltip: {},
    xAxis: {
      data: ['检验审核', '签到审核', '计划审核', '采集审核', '分配审核', '任务审核']
    },
    yAxis: {},
    series: [
      {
        name: '数量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });

  window.addEventListener('resize', function () {
    myChart.resize();
  });
});
</script>
<style lang="scss" scoped>
#home {
  background-color: $bg-white;
  padding: 30px 10px 10px 10px;
  .el-divider {
    margin: 0 0 24px 0;
    :deep(.el-divider__text) {
      padding-left: 30px;
    }
    .el-icon {
      position: absolute;
      top: 2px;
      left: 10px;
    }
  }
  .list {
    padding: 0 0 20px 30px;
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    .item {
      // border: 1px solid #ccc;
      width: 90px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 5px 5px 5px;
      border-radius: 5px;
      transition: 0.3s;
      cursor: pointer;
      &:hover {
        box-shadow: $card-shadow;
      }
      img {
        width: 45px;
        height: 45px;
      }
      span {
        line-height: 30px;
        font-size: 15px;
      }
    }
  }
  .dvd {
    position: relative;
    .el-divider {
      margin-right: 20px;
      width: calc(100% - 30px);
    }
    .right-icon {
      position: absolute;
      right: 5px;
      top: -8px;
      cursor: pointer;
    }
    .ifm-module {
      width: 100%;
      border: none;
      overflow: hidden;
    }
  }
  .mt-30 {
    margin-top: 30px;
  }
  .chart {
    width: 100%;
    height: 250px;
  }
}
</style>
